{ "title": "Favicon", "original_title": "Favicon", "pageid": "398310", "url": "https://en.wikipedia.org/wiki/Favicon", "_content": "A favicon (; short for favorite icon), also known as a shortcut icon, website icon, tab icon, URL icon, or bookmark icon, is a file containing one or more small icons associated with a particular website or web page. A web designer can create such an icon and upload it to a website (or web page) by several means, and graphical web browsers will then make use of it. Browsers that provide favicon support typically display a page's favicon in the browser's address bar (sometimes in the history as well) and next to the page's name in a list of bookmarks. Browsers that support a tabbed document interface typically show a page's favicon next to the page's title on the tab, and site-specific browsers use the favicon as a desktop icon.\n\n\n== History ==\nIn March 1999, Microsoft released Internet Explorer 5, which supported favicons for the first time. Originally, the favicon was a file called favicon.ico placed in the root directory of a website. It was used in Internet Explorer's favorites (bookmarks) and next to the URL in the address bar if the page was bookmarked. A side effect was that the number of visitors who had bookmarked the page could be estimated by the requests of the favicon. This side effect no longer works, as all modern browsers load the favicon file to display in their web address bar, regardless of whether the site is bookmarked.\n\n\n=== Standardization ===\nThe favicon was standardized by the World Wide Web Consortium (W3C) in the HTML 4.01 recommendation, released in December 1999, and later in the XHTML 1.0 recommendation, released in January 2000. The standard implementation uses a link element with a rel attribute in the section of the document to specify the file format, file name, and location. Unlike in the prior scheme, the file can be in any Website directory and have any image file format.In 2003, the .ico format was registered by a third party with the Internet Assigned Numbers Authority (IANA) under the MIME type image/vnd.microsoft.icon. However, when using the .ico format to display as images (e.g. not as favicon), Internet Explorer cannot display files served with this standardized MIME type. A workaround for Internet Explorer is to associate .ico with the non-standard image/x-icon MIME type in Web servers.RFC 5988 established an IANA link relation registry, and rel=\"icon\" was registered in 2010 based on the HTML5 specification. The popular theoretically identifies two relations, shortcut and icon, but shortcut is not registered and is redundant. In 2011 the HTML living standard specified that for historical reasons shortcut is allowed immediately before icon; however, shortcut does not have a meaning in this context.\n\n\n=== Legacy ===\nInternet Explorer 5\u201310 supports only the ICO file format. Netscape 7 and Internet Explorer versions 5 and 6 display the favicon only when the page is bookmarked, and not simply when the pages are visited as in later browsers.\n\n\n== Examples of favicons ==\n\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\n\n== Browser implementation ==\nThe following tables illustrate support of various features with major web browsers. Unless noted, the version numbers indicate the starting version number of a supported feature.\n\n\n=== Image file format support ===\nThe following table illustrates the image file format support for the favicon.\n\nAdditionally, such icon files can be 16\u00d716, 32\u00d732, 48\u00d748, or 64\u00d764 pixels in size, and 8-bit, 24-bit, or 32-bit in color depth. The ICO file format article explains the details for icons with more than 256 colors on various Microsoft Windows platforms.\n\n\n=== Use of favicon ===\nThis table illustrates the different areas of the browser where favicons can be displayed.\n\nOpera Software added the ability to change the favicon in the Speed Dial in Opera 10.\n\n\n=== How to use ===\nThis table illustrates the different ways the favicon can be recognized by the web browser. The standard implementation uses a link element with a rel attribute in the section of the document to specify the file's format, name and location.\n\nIf links for both PNG and ICO favicons are present, PNG-favicon-compatible browsers select which format and size to use as follows. Firefox and Safari will use the favicon that comes last. Chrome for Mac will use whichever favicon is ICO formatted, otherwise the 32\u00d732 favicon. Chrome for Windows will use the favicon that comes first if it is 16\u00d716, otherwise the ICO. If none of the aforementioned options are available, Chrome will use whichever favicon comes first, exactly the opposite of Firefox and Safari. Indeed, Chrome for Mac will ignore the 16\u00d716 favicon and use the 32\u00d732 version, only to scale it back down to 16\u00d716 on non-retina devices. Opera will choose from any of the available icons at random.Only SeaMonkey does not fetch favicon.ico files in the website's root by default.\n\n\n=== HTML5 recommendation for icons in multiple sizes ===\nThe current HTML5 specification recommends specifying multiple sizes for the icons, using the attributes rel=\"icon\" sizes=\"space-separated list of icon dimensions\" within a tag. Multiple icon formats, including container formats such as Microsoft .ico and Macintosh .icns files, as well as Scalable Vector Graphics may be provided by including the icon's content type in the format type=\"file content-type\" within the tag.\nAs of iOS 5, Apple mobile devices ignore the HTML5 recommendation and instead use the proprietary apple-touch-icon method detailed below. The Google Chrome web browser however, will select the closest matching size from those provided in the HTML headers to create 128\u00d7128 pixel application icons, when the user chooses the Create application shortcuts... from the \"Tools\" menu.\n\n\n=== Home screen icons on mobile devices ===\nOn Apple iPhones and iPads, as well as Android mobile devices, users can pin web pages as shortcuts icons to their home screen. These shortcut icons look similar to regular apps and web developers can provide dedicated icons for them.\n\n\n==== Apple devices ====\nFor Apple devices with the iOS operating system version 1.1.3 or later, users can pin a website to the home screen using the Add to Home Screen button within the share sheet in Safari.This works for any website. But for iOS to display the shortcut with an icon, the a website needs to supplying a in the section of documents served by the website. If the custom icon is not provided, a thumbnail of the web page will be put on the home screen instead.The app icon sizes on the different device classes differ. The recommended sizes for the icons are 152x152 for iPads (until iPad 2, released in 2011), 167x167 for iPads with Retina screens (iPad 3 and later) and 180x180 for iPhones. If no icon in the matching size is provided, iOS will pick the largest icon with rel=\"apple-touch-icon\" and scale it automatically.\nExample code\n\nThe icon file referenced by apple-touch-icon is modified to add rounded corners. On the iOS versions prior to iOS 7, a drop shadow, and reflective shine would be added, and apple-touch-icon-precomposed icon may be provided to instruct devices not to apply reflective shine on the image.No HTML is required by browsers or mobile devices to retrieve these icons. The website's root is the default location for the file apple-touch-icon.png (in order of priority).\n\n\n==== Android devices ====\nOn Android devices, users can use the Add to home screen function in Chrome's tools menu to pin a web page to their home screen.\nThis also works for any website, but if no favicon is provided, a generic icon is used. As Android app icons are sized in 48x48 points, website should provide favicons sized in multiples of 48x48 pixels. For modern high resolution devices, Google recommends providing icons in 192x192 pixels.\nExample code\nAndroid also supports Web Manifest files, which makes it possible to integrate web sites deeper within the system. A Web Manifest is a JSON file, that specifies meta data for a progressive web app. It allows the developer to not only provide the icons but also a short name for display on the home screen as well as theme colors. However, providing a web manifest file is not necessary for the Add to home screen feature to work.\n\n\n=== Animated favicons ===\nVarious browsers such as Firefox and Opera support animation of favicons. A bug report has been open for Firefox since 2001 requesting a way to disable this feature.\n\n\n== Limitations and criticism ==\nDue to the need to always check for it in a fixed location, the favicon can lead to artificially slow page-load time and unnecessary 404 entries in the server log if it is nonexistent.The W3C did not standardize the rel-attribute, so there are other keywords such as shortcut icon that are also accepted by the user agent.Favicons are often manipulated as part of phishing or eavesdropping attacks against HTTPS web pages. Many web browsers display favicons near areas of the web browser's UI, such as the address bar, that are used to convey whether the connection to a website is using a secure protocol like TLS. By changing the favicon to a familiar padlock image an attacker can attempt to trick the user into thinking they are securely connected to the proper website. Automated man-in-the-middle attack tools such as sslstrip utilize this trick. In order to eliminate this, some web browsers, such as Firefox or Google Chrome, display the favicon within the tab whilst displaying the security status of the protocol used to access the website beside the URL.Since favicons are usually located at the root of the site directory on the server, they can be employed with some reliability to disclose whether a web client is logged into a given service. This works by making use of the redirect-after-login feature of many websites, by querying for the favicon in a redirect-after-login URL and testing the server response to discern whether the user is given the requested resource (which means they are logged in), or instead redirected to the login page (which means that they are not logged into the service).In 2021, a method for browser tracking using favicons was demonstrated by researchers at the University of Illinois.\n\n\n== References ==\n\n\n== External links ==\n\nW3C web standards organization on how to add a Favicon\nSystems and Methods Involving Favicons 2008 patent application", "_revision_id": 1147161798, "_parent_id": 1147152895, "_summary": "A favicon (; short for favorite icon), also known as a shortcut icon, website icon, tab icon, URL icon, or bookmark icon, is a file containing one or more small icons associated with a particular website or web page. A web designer can create such an icon and upload it to a website (or web page) by several means, and graphical web browsers will then make use of it. Browsers that provide favicon support typically display a page's favicon in the browser's address bar (sometimes in the history as well) and next to the page's name in a list of bookmarks. Browsers that support a tabbed document interface typically show a page's favicon next to the page's title on the tab, and site-specific browsers use the favicon as a desktop icon.\n\n", "_images": [ "https://upload.wikimedia.org/wikipedia/commons/f/fa/Apple_logo_black.svg", "https://upload.wikimedia.org/wikipedia/commons/6/64/Etsy_icon.svg", "https://upload.wikimedia.org/wikipedia/commons/b/b7/PayPal_Logo_Icon_2014.svg", "https://upload.wikimedia.org/wikipedia/commons/3/3a/Roblox_player_icon_black.svg", "https://upload.wikimedia.org/wikipedia/commons/8/84/Spotify_icon.svg", "https://upload.wikimedia.org/wikipedia/commons/4/4f/Twitter-logo.svg", "https://upload.wikimedia.org/wikipedia/commons/2/22/Wikipedia_favicon_in_Firefox_on_KDE_%282023%29.png", "https://upload.wikimedia.org/wikipedia/commons/9/99/Wiktionary-logo-en-v2.svg", "https://upload.wikimedia.org/wikipedia/commons/0/09/YouTube_full-color_icon_%282017%29.svg", "https://upload.wikimedia.org/wikipedia/en/4/4a/Commons-logo.svg" ], "_references": [ "http://allinthehead.com/retro/319/how-to-set-an-apple-touch-icon-for-any-site", "http://jeffcode.blogspot.com/2007/12/why-doesnt-favicon-for-my-site-appear.html", "http://egressive.com/tutorial/creating-a-multi-resolution-favicon-including-transparency-with-the-gimp", "http://www.htmlhelp.com/faq/html/all.html#favicon", "http://informationgift.com/ud/faviconic/", "http://www.jonathantneal.com/blog/understand-the-favicon", "http://msdn.microsoft.com/en-us/library/ms537656(VS.85).aspx", "http://blogs.msdn.com/b/ieinternals/archive/2011/02/11/ie9-release-candidate-minor-changes-list.aspx", "http://www.opera.com/docs/changelogs/windows/1000b2/", "http://www.opera.com/docs/changelogs/windows/700/", "http://www.opera.com/support/usingopera/operaini/#multimedia", "http://www.photoshopsupport.com/tutorials/jennifer/favicon.html", "http://www.thesitewizard.com/archive/favicon.shtml", "http://www.securitytube.net/video/157", "http://html5.org/tools/web-apps-tracker?from=6403&to=6404", "http://www.w3.org/2005/10/howto-favicon", "http://www.w3.org/2005/10/profile", "http://www.w3.org/TR/2000/REC-xhtml1-20000126/", "http://www.w3.org/TR/html401/", "http://blog.whatwg.org/html-is-the-new-html5", "http://news.bbc.co.uk/2/hi/uk_news/magazine/7839744.stm", "https://loqbooq.app/blog/add-favicon-modern-browser-guide", "https://mathiasbynens.be/notes/rel-shortcut-icon", "https://developer.apple.com/library/archive/documentation/AppleApplications/Reference/SafariWebContent/pinnedTabs/pinnedTabs.html", "https://developer.apple.com/library/archive/documentation/AppleApplications/Reference/SafariWebContent/ConfiguringWebApplications/ConfiguringWebApplications.html#//apple_ref/doc/uid/TP40002051-CH3-SW4", "https://developer.apple.com/library/safari/#documentation/AppleApplications/Reference/SafariWebContent/ConfiguringWebApplications/ConfiguringWebApplications.html#//apple_ref/doc/uid/TP40002051-CH3-SW4", "https://developer.apple.com/safari/library/documentation/InternetWeb/Conceptual/iPhoneWebAppHIG/MetricsLayout/MetricsLayout.html#//apple_ref/doc/uid/TP40007900-CH6-SW31", "https://arstechnica.com/information-technology/2012/07/firefox-14-arrives-with-secure-search/", "https://arstechnica.com/information-technology/2021/02/new-browser-tracking-hack-works-even-when-you-flush-caches-or-go-incognito/", "https://www.chromestatus.com/feature/5180316371124224", "https://www.engadget.com/2012/04/24/mozilla-firefox-favicons-security-risk-banishes-from-address-bar/", "https://github.com/paulirish/html5-boilerplate/commit/37b5fec090d00f38de64b591bcddcb205aadf8ee", "https://patents.google.com/patent/US20090313579A1/en", "https://blog.iconfactory.com/2018/06/favicons-finally/", "https://www.idownloadblog.com/2018/06/14/safari-favicons-tutorial/", "https://connect.microsoft.com/IE/feedback/details/782416/svg-favicon-support", "https://docs.microsoft.com/en-us/archive/blogs/ieinternals/fun-with-favicons", "https://blogs.msdn.microsoft.com/ieinternals/2011/02/11/ie9-rc-minor-changes-list/#comments", "https://dev.opera.com/blog/opera-46/#svg-favicons", "https://news.ycombinator.com/item?id=9844389", "https://robinlinus.github.io/socialmedia-leak/", "https://material.io/design/iconography/product-icons.html#grid-and-keyline-shapes", "https://web.archive.org/web/20031207165529/http://www.golivein24.com/tips/favicon/", "https://web.archive.org/web/20101225130900/http://egressive.com/tutorial/creating-a-multi-resolution-favicon-including-transparency-with-the-gimp", "https://web.archive.org/web/20110713161949/http://www.securitytube.net/video/157", "https://web.archive.org/web/20130523175450/http://www.jonathantneal.com/blog/understand-the-favicon/", "https://web.archive.org/web/20180105185417/https://msdn.microsoft.com/en-us/library/ms537656(VS.85).aspx", "https://web.archive.org/web/20210523231631/https://docs.microsoft.com/en-us/archive/blogs/ieinternals/fun-with-favicons", "https://web.archive.org/web/20210711230818/https://loqbooq.app/blog/add-favicon-modern-browser-guide", "https://bugs.chromium.org/p/chromium/issues/detail?id=19731", "https://bugs.chromium.org/p/chromium/issues/detail?id=385503", "https://www.iana.org/assignments/link-relations/link-relations.xml", "https://www.iana.org/assignments/media-types/image/vnd.microsoft.icon", "https://bugzilla.mozilla.org/show_bug.cgi?id=111373", "https://bugzilla.mozilla.org/show_bug.cgi?id=366324#c22", "https://developer.mozilla.org/en-US/docs/Web/Progressive_web_apps/Add_to_home_screen", "https://www-archive.mozilla.org/releases/mozilla0.9.6/", "https://www.w3.org/2005/10/howto-favicon", "https://webkit.org/blog/8327/", "https://html.spec.whatwg.org/multipage/semantics.html#rel-icon" ], "_links": [ ".icns", ".ico", "360 Secure Browser", "AOL Explorer", "APNG", "AT&T Pogo", "Abaco (web browser)", "Address bar", "Adobe GoLive", "Amaya (web editor)", "Amazon Silk", "Android (operating system)", "Animated GIF", "Apple Inc.", "Arachne (web browser)", "Arena (web browser)", "Arora (web browser)", "Avant Browser", "Avast Secure Browser", "Basilisk (web browser)", "Beaker (web browser)", "Beonex Communicator", "Blazer (web browser)", "Blink (browser engine)", "Blisk (browser)", "Bolt (web browser)", "Bookmark (World Wide Web)", "Bookmark (digital)", "Brave (web browser)", "Browser extension", "Browser tracking", "CM Browser", "CSS", "Cake Browser", "Camino (web browser)", "Charon (web browser)", "Chromium (web browser)", "Citrio", "Classilla", "Color depth", "Comodo Dragon", "Comodo IceDragon", "Comparison of web browsers", "Computer file", "Conkeror", "Content type", "C\u1ed1c C\u1ed1c", "Deepnet Explorer", "Desktop icon", "Dillo", "Document Object Model", "Dolphin Browser", "Dooble", "DuckDuckGo", "ELinks", "Epic (web browser)", "Etsy", "Eww (web browser)", "Falkon", "Features of the Opera web browser", "Firefox", "Firefox Lite", "Flock (web browser)", "Flow (web browser)", "Fluid (web browser)", "Folder (computing)", "Fork (software development)", "GNOME Web", "GNU IceCat", "Galeon", "Gazelle (web browser)", "Gecko (software)", "Ghostzilla", "GitHub", "Google Chrome", "Google TV (smart TV platform)", "Graphics Interchange Format", "GreenBrowser", "HEAD tag", "HTML", "HTML5", "HTTP", "HTTP/2", "HTTP/3", "HTTPS", "HTTP cookie", "Home screen", "HotJava", "IBM Home Page Reader", "IBM Lotus Symphony", "IBM WebExplorer", "IBrowse", "ICO (file format)", "ICab", "IOS (Apple)", "IOS 5", "IPad", "IPad (3rd generation)", "IPad 2", "IPhone", "Ian Hickson", "Icon (computing)", "Image file format", "Indexed Database API", "Internet Assigned Numbers Authority", "Internet Explorer", "Internet Explorer 5", "Internet Explorer 6", "Internet media type", "Iris Browser", "JPEG File Interchange Format", "JavaScript", "K-Meleon", "Kazehakase", "KidZui", "Kirix Strata", "Konqueror", "Kylo (web browser)", "Line Mode Browser", "Link relation", "Links (web browser)", "List of web browsers", "Lunascape", "Lynx (web browser)", "MSN TV", "Man-in-the-middle attack", "Maxthon", "MediaBrowser", "Mercury Browser", "MicroB", "Microsoft", "Microsoft Developer Network", "Microsoft Edge", "Microsoft Edge Legacy", "Microsoft Live Labs Deepfish", "Microsoft Windows", "Midori (web browser)", "Minimo", "Mosaic (web browser)", "Mozilla", "Mozilla Application Suite", "Naver Whale", "NeoPlanet", "NetCaptor", "NetFront", "NetPositive", "NetSurf", "Netscape (web browser)", "Netscape 7", "Nokia Browser for Symbian", "OmniWeb", "Online Certificate Status Protocol", "Opera (web browser)", "Opera 10", "Opera Coast", "Opera Software", "Operating system", "Origyn Web Browser", "Otter Browser", "Pale Moon", "PayPal", "PirateBrowser", "Pixel", "Portable Network Graphics", "Private browsing", "Puffin Browser", "QQ browser", "QtWeb", "Qutebrowser", "Redcore", "Rekonq", "Rel attribute", "Roblox", "Roccat Browser", "Rockmelt", "Root directory", "SRWare Iron", "Safari (web browser)", "SalamWeb", "Samsung Internet", "Scalable Vector Graphics", "SeaMonkey", "Shiira", "Site-specific browser", "Skweezer", "Skyfire (company)", "Sleipnir (web browser)", "SlimBrowser", "SpaceTime (software)", "Spotify", "Sputnik (search engine)", "Sslstrip", "Steel (web browser)", "Surf (web browser)", "Swiftfox", "Swiftweasel", "Tabbed document interface", "Teashark", "TenFourFox", "Thumbnail", "ThunderHawk", "Timberwolf (web browser)", "Tor Browser", "Torch (web browser)", "Transport Layer Security", "Trident (software)", "Twitter", "UC Browser", "URL", "User agent", "Uzbl", "Vision Mobile Browser", "Vivaldi (web browser)", "W3m", "WHATWG", "Waterfox", "WebAssembly", "WebGL", "WebKit", "WebPositive", "WebRTC", "WebSocket", "Web browser", "Web design", "Web page", "Web standards", "Web storage", "Website", "Wikipedia", "WinWAP", "Workaround", "WorldWideWeb", "World Wide Web Consortium", "XB Browser", "XHTML", "Xombrero", "Yandex Browser", "YouTube", "ZAC Browser" ], "_sections": [], "_html": "
Icon associated with a particular web site
\n

\n

\n
Wikipedia's favicon, shown in Firefox
\n

A favicon (/\u02c8f\u00e6v.\u026a\u02cck\u0252n/; short for favorite icon), also known as a shortcut icon, website icon, tab icon, URL icon, or bookmark icon, is a file containing one or more small icons[1] associated with a particular website or web page.[1][2] A web designer can create such an icon and upload it to a website (or web page) by several means, and graphical web browsers will then make use of it.[3] Browsers that provide favicon support typically display a page's favicon in the browser's address bar (sometimes in the history as well) and next to the page's name in a list of bookmarks.[3] Browsers that support a tabbed document interface typically show a page's favicon next to the page's title on the tab, and site-specific browsers use the favicon as a desktop icon.[1]\n

\n

Contents

\n\n
\n\n

History[edit]

\nIn March 1999, Microsoft released Internet Explorer 5, which supported favicons for the first time.[4] Originally, the favicon was a file called favicon.ico placed in the root directory of a website. It was used in Internet Explorer's favorites (bookmarks) and next to the URL in the address bar if the page was bookmarked.[5][6][7][4] A side effect was that the number of visitors who had bookmarked the page could be estimated by the requests of the favicon. This side effect no longer works, as all modern browsers load the favicon file to display in their web address bar, regardless of whether the site is bookmarked.[6]

\n

Standardization[edit]

\n

The favicon was standardized by the World Wide Web Consortium (W3C) in the HTML 4.01 recommendation, released in December 1999, and later in the XHTML 1.0 recommendation, released in January 2000.[8][failed verification][9][failed verification] The standard implementation uses a link element with a rel attribute in the <head> section of the document to specify the file format, file name, and location. Unlike in the prior scheme, the file can be in any Website directory and have any image file format.[10][11]\n

In 2003, the .ico format was registered by a third party with the Internet Assigned Numbers Authority (IANA) under the MIME type image/vnd.microsoft.icon.[12][13] However, when using the .ico format to display as images (e.g. not as favicon), Internet Explorer cannot display files served with this standardized MIME type.[13] A workaround for Internet Explorer is to associate .ico with the non-standard image/x-icon MIME type in Web servers.[14]\n

RFC 5988 established an IANA link relation registry,[15] and rel=\"icon\" was registered in 2010 based on the HTML5 specification. The popular <link rel=\"shortcut icon\" type=\"image/png\" href=\"image/favicon.png\"> theoretically identifies two relations, shortcut and icon, but shortcut is not registered and is redundant. In 2011 the HTML living standard[16] specified that for historical reasons shortcut is allowed immediately before icon;[17] however, shortcut does not have a meaning in this context.\n

\n

Legacy[edit]

\n

Internet Explorer 5\u201310 supports only the ICO file format. Netscape 7 and Internet Explorer versions 5 and 6 display the favicon only when the page is bookmarked, and not simply when the pages are visited as in later browsers.[4]\n

\n

Examples of favicons[edit]

\n\n

Browser implementation[edit]

\n

The following tables illustrate support of various features with major web browsers. Unless noted, the version numbers indicate the starting version number of a supported feature.\n

\n

Image file format support[edit]

\n

The following table illustrates the image file format support for the favicon.\n

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
Browser\nImage File Format\n
ICO\nPNG\nGIF\nAnimated GIFs\nJPEG\nAPNG\nSVG\n
Edge\nYes\nYes\nYes\nNo\nYes\nUn­known\nYes\n
Firefox\n1.0[18]\n1.0[18]\n1.0[18]\nYes[19]\nYes\n3.0[19]\n41.0[20]\n
Google Chrome\nYes\nYes\n4.0\nNo[21][22]\n4.0\nNo\n80[23]\n
Internet Explorer\n5.0[24]\n11.0[25]\n11.0[25]\nNo[24]\nNo[24]\nNo[24]\nNo[26]\n
Opera\n7.0[27]\n7.0[27]\n7.0[27]\n7.0[27]\n7.0[27]\n9.5\n44.0[28]\n
Safari\nYes\n4.0\n4.0\nNo\n4.0\nNo\nNon-standard (12.0)[a][29][30]\n

Additionally, such icon files can be 16\u00d716, 32\u00d732, 48\u00d748, or 64\u00d764 pixels in size, and 8-bit, 24-bit, or 32-bit in color depth.[1][3] The ICO file format article explains the details for icons with more than 256 colors on various Microsoft Windows platforms.\n

Use of favicon[edit]

\n

This table illustrates the different areas of the browser where favicons can be displayed.\n

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
Browser\nAddress bar\nAddress bar drop down list\nLinks bar\nBookmarks\nTabs\nDrag to desktop\n
Edge\nNo\nYes\nYes\nYes\nYes\nYes\n
Firefox\n1.0\u201312.0: Yes[31]
> v13: No[32]\n		Yes\nYes\nYes[31]\nYes[31]\nYes[31]\n
Google Chrome\nNo[31]\nNo\nYes[31]\nYes[31]\n1.0[31]\nNo[31]\n
Internet Explorer\n7.0[31]\nNo\n5.0[31]\n5.0[31]\n7.0[31]\n5.0[31]\n
Opera\n7.0\u201312.17: Yes
> v14: No[31]\n		No\n7.0[31]\n7.0[31]\n7.0[31]\n7.0[31]\n
Safari\nYes[31]\nYes\nNo[31]\nYes[31]\n1.0\u20138.0: Yes
9.0\u201311.0: No
> 12.0: Optional[33]\n		No[31]\n
\n
\n

Opera Software added the ability to change the favicon in the Speed Dial in Opera 10.[34]\n

\n

How to use[edit]

\n

This table illustrates the different ways the favicon can be recognized by the web browser. The standard implementation uses a link element with a rel attribute in the <head> section of the document to specify the file's format, name and location.\n

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
\nEdge\nFirefox\nGoogle Chrome\nInternet Explorer\nOpera\nSafari\n
<link rel="shortcut icon"\n href="https://example.com/myicon.ico">\n
\n		Yes[4]\nYes[4]\nYes[4]\nYes[4][24]\nYes[4]\nYes\n
<link rel="icon"\n type="image/vnd.microsoft.icon"\n href="https://example.com/image.ico">\n
\n		Yes\nYes\nYes\nYes (from IE 9)[25]\nYes\nYes\n
<link rel="icon" type="image/x-icon"\n href="https://example.com/image.ico">\n
\n		Yes[4]\nYes[4]\nYes[4]\nYes (from IE 9)[35]\nYes[4]\nYes\n
<link rel="icon"\n href="https://example.com/image.ico">\n
\n		Yes\nYes\nYes\nYes (from IE 11)[25]\nYes\nYes\n
<link rel="icon" type="image/gif"\n href="https://example.com/image.gif">\n
\n		Yes\nYes\nYes\nYes (from IE 11)[25]\nYes\nYes\n
<link rel="icon" type="image/png"\n href="https://example.com/image.png">\n
\n		Yes\nYes\nYes\nYes (from IE 11)[25]\nYes\nYes\n
<link rel="icon" type="image/svg+xml"\n href="https://example.com/image.svg">\n
\n		Yes\nYes\nYes\nYes\nYes\nNo\n
<link rel="mask-icon"\n href="https://example.com/image.svg" color="red">\n
\n		No\nNo\nNo\nNo\nNo\nYes[36]\n
favicon.ico located in the website's root\nYes[citation needed]\nOptional[b]\nYes\nYes\nOptional[c]\nYes\n
precedence: prefer root or (X)HTML linked version\nlinked[31]\nlinked[31]\nlinked[31]\nlinked[31]\n?\n?\n
\n
\n
    \n
  1. ^ Safari, since version 12.0, supports single-color SVG favicons in some cases in a non-standard mask-icon format.\n
    2. \n
  2. ^ Firefox only accepts favicon.ico in the website's root without a <link> tag if the setting browser.chrome.site_icons is set to true in about:config. The default value is true. If set to false, these favicons are ignored.\n
    3. \n
  3. ^ Opera loads /favicon.ico only if Multimedia/Always load favicon option in opera:config is set to 1. See Opera Support page for more details.\n
    4. \n
\n

If links for both PNG and ICO favicons are present, PNG-favicon-compatible browsers select which format and size to use as follows. Firefox and Safari will use the favicon that comes last. Chrome for Mac will use whichever favicon is ICO formatted, otherwise the 32\u00d732 favicon. Chrome for Windows will use the favicon that comes first if it is 16\u00d716, otherwise the ICO. If none of the aforementioned options are available, Chrome will use whichever favicon comes first, exactly the opposite of Firefox and Safari. Indeed, Chrome for Mac will ignore the 16\u00d716 favicon and use the 32\u00d732 version, only to scale it back down to 16\u00d716 on non-retina devices. Opera will choose from any of the available icons at random.[37]\n

Only SeaMonkey does not fetch favicon.ico files in the website's root by default.[38]\n

\n

HTML5 recommendation for icons in multiple sizes[edit]

\n

The current HTML5 specification recommends specifying multiple sizes for the icons, using the attributes rel=\"icon\" sizes=\"space-separated list of icon dimensions\" within a <link> tag.[39] Multiple icon formats, including container formats such as Microsoft .ico and Macintosh .icns files, as well as Scalable Vector Graphics may be provided by including the icon's content type in the format type=\"file content-type\" within the <link> tag.\n

As of iOS 5, Apple mobile devices ignore the HTML5 recommendation and instead use the proprietary apple-touch-icon method detailed below. The Google Chrome web browser however, will select the closest matching size from those provided in the HTML headers to create 128\u00d7128 pixel application icons, when the user chooses the Create application shortcuts... from the \"Tools\" menu.\n

\n

Home screen icons on mobile devices[edit]

\n

On Apple iPhones and iPads, as well as Android mobile devices, users can pin web pages as shortcuts icons to their home screen. These shortcut icons look similar to regular apps and web developers can provide dedicated icons for them.\n

\n

Apple devices[edit]

\n

For Apple devices with the iOS operating system version 1.1.3 or later, users can pin a website to the home screen using the Add to Home Screen button within the share sheet in Safari.[40][41]\n

This works for any website. But for iOS to display the shortcut with an icon, the a website needs to supplying a <link rel=\"apple-touch-icon\" ...> in the <head> section of documents served by the website. If the custom icon is not provided, a thumbnail of the web page will be put on the home screen instead.[42]\n

The app icon sizes on the different device classes differ. The recommended sizes for the icons are 152x152 for iPads (until iPad 2, released in 2011), 167x167 for iPads with Retina screens (iPad 3 and later) and 180x180 for iPhones. If no icon in the matching size is provided, iOS will pick the largest icon with rel=\"apple-touch-icon\" and scale it automatically.[43]\n

\n
Example code[44]
\n
<!-- For iPad -->\n <link rel="apple-touch-icon" type="image/png" sizes="167x167" href="favicon-167x167.png">\n
\n
<!-- For iPhone -->\n <link rel="apple-touch-icon" type="image/png" sizes="180x180" href="favicon-180x180.png">\n
\n

The icon file referenced by apple-touch-icon is modified to add rounded corners. On the iOS versions prior to iOS 7, a drop shadow, and reflective shine would be added, and apple-touch-icon-precomposed icon may be provided to instruct devices not to apply reflective shine on the image.[41][42]\n

No HTML is required by browsers or mobile devices to retrieve these icons.[42] The website's root is the default location for the file apple-touch-icon.png (in order of priority).[41][42]\n

\n

Android devices[edit]

\n

On Android devices, users can use the Add to home screen function in Chrome's tools menu to pin a web page to their home screen.\n

This also works for any website, but if no favicon is provided, a generic icon is used. As Android app icons are sized in 48x48 points, website should provide favicons sized in multiples of 48x48 pixels. For modern high resolution devices, Google recommends providing icons in 192x192 pixels.[45]\n

\n
Example code[44]
\n
<!-- For Android -->\n <link rel="icon" type="image/png" sizes="48x48" href="favicon-48x48.png">\n <link rel="icon" type="image/png" sizes="192x192" href="favicon-192x192.png">\n
\n

Android also supports Web Manifest files, which makes it possible to integrate web sites deeper within the system. A Web Manifest is a JSON file, that specifies meta data for a progressive web app. It allows the developer to not only provide the icons but also a short name for display on the home screen as well as theme colors.[46] However, providing a web manifest file is not necessary for the Add to home screen feature to work.[44]\n

\n

Animated favicons[edit]

\n

Various browsers such as Firefox and Opera support animation of favicons. A bug report has been open for Firefox since 2001 requesting a way to disable this feature.[47][48]\n

\n

Limitations and criticism[edit]

\n

Due to the need to always check for it in a fixed location, the favicon can lead to artificially slow page-load time and unnecessary 404 entries in the server log if it is nonexistent.[6]\n

The W3C did not standardize the rel-attribute, so there are other keywords such as shortcut icon that are also accepted by the user agent.[11][24]\n

Favicons are often manipulated as part of phishing or eavesdropping attacks against HTTPS web pages. Many web browsers display favicons near areas of the web browser's UI, such as the address bar, that are used to convey whether the connection to a website is using a secure protocol like TLS. By changing the favicon to a familiar padlock image an attacker can attempt to trick the user into thinking they are securely connected to the proper website. Automated man-in-the-middle attack tools such as sslstrip utilize this trick.[49] In order to eliminate this, some web browsers, such as Firefox or Google Chrome, display the favicon within the tab whilst displaying the security status of the protocol used to access the website beside the URL.[50]\n

Since favicons are usually located at the root of the site directory on the server, they can be employed with some reliability to disclose whether a web client is logged into a given service. This works by making use of the redirect-after-login feature of many websites, by querying for the favicon in a redirect-after-login URL and testing the server response to discern whether the user is given the requested resource (which means they are logged in), or instead redirected to the login page (which means that they are not logged into the service).[51]\n

In 2021, a method for browser tracking using favicons was demonstrated by researchers at the University of Illinois.[52]\n

\n

References[edit]

\n
\n
    \n
  1. ^ a b c d Lane, Dave (9 August 2008). \"Creating a Multi-Resolution Favicon Including Transparency with the GIMP\". Egressive.com. Archived from the original on 25 December 2010. Retrieved 25 February 2011.\n
    2. \n
  2. ^ \"What's With Google's New Mini Icon?\". BBC. 20 January 2009. Retrieved 25 February 2011. That 16x16 pixel square is the size of the favicon in question, if not the scope.\n
    3. \n
  3. ^ a b c Apple, Jennifer. \"Favicon \u2014 How To Create A Favicon.ico\". Photoshopsupport.com. Retrieved 25 February 2011.\n
    4. \n
  4. ^ a b c d e f g h i j k l \"How to Add a Shortcut Icon to a Web Page\". Microsoft Developer Network. Microsoft. Archived from the original on 5 January 2018. Retrieved 15 March 2010.\n
    5. \n
  5. ^ McGrew, Darin (26 April 2007). \"Web Authoring FAQ \u2013 8.11. How can I have a custom icon when people bookmark my site?\". htmlhelp.com. Retrieved 23 February 2011.\n
    6. \n
  6. ^ a b c Heng, Christopher (7 September 2008). \"What is Favicon.ico? Personalise Your Site's Bookmarks\". thesitewizard.com. Retrieved 23 February 2011.\n
    7. \n
  7. ^ \"Creating favicons with Adobe Photoshop and GoLive\". Adobe GoLive. Archived from the original on 7 December 2003. Retrieved 25 February 2011.{{cite web}}: CS1 maint: unfit URL (link)\n
    8. \n
  8. ^ \"HTML 4.01 Specification\". World Wide Web Consortium. 24 December 1999. Retrieved 14 March 2011.\n
    9. \n
  9. ^ \"XHTML\u2122 1.0: The Extensible HyperText Markup Language\". World Wide Web Consortium. 26 January 2000. Retrieved 14 March 2011.\n
    10. \n
  10. ^ Dubost, Karl (October 2005). \"Web site meta data profile: favicon, ...\" World Wide Web Consortium. Retrieved 23 February 2011.\n
    11. \n
  11. ^ a b Dubost, Karl (24 October 2005). \"How to Add a Favicon to your Site\". World Wide Web Consortium. Retrieved 25 February 2011.\n
    12. \n
  12. ^ Butcher, Simon (3 September 2003). \"Published specification\". Internet Assigned Numbers Authority. Retrieved 25 February 2011.\n
    13. \n
  13. ^ a b \"IE9 RC Minor Changes List\". IEInternals. Retrieved 7 April 2016.\n
    14. \n
  14. ^ Irish, Paul (15 December 2010). \"commit 37b5fec090d00f38de64 to paulirish's html5-boilerplate\". GitHub. Retrieved 25 February 2011.\n
    15. \n
  15. ^ \"Link Relations\". IANA.\n
    16. \n
  16. ^ Ian Hickson (19 January 2011). \"HTML is the new HTML5\". The WHATWG Blog. WHATWG.\n
    17. \n
  17. ^ \"HTML5 revision r6404\". HTML5 Tracker.\n
    18. \n
  18. ^ a b c David (19 July 2003). \"Mozilla 0.9.6 Release Notes\". Mozilla. Retrieved 23 February 2011.\n
    19. \n
  19. ^ a b \"Bug 111373: don't allow animated site icons (favicons)\". Retrieved 1 June 2014.\n
    20. \n
  20. ^ Daniel Holbert (12 June 2015). \"Bug 366324 \u2013 SVG site icons (favicons, shortcut icons) support \u2013 comment 55\". Bugzilla@Mozilla. Mozilla. Retrieved 12 June 2015.\n
    21. \n
  21. ^ tracker, chromium. \"no movement in favicon\". chromium.org. Retrieved 11 April 2016.\n
    22. \n
  22. ^ tracker, chromium. \"Animated Favicons not supported\". chromium.org. Retrieved 8 November 2018.\n
    23. \n
  23. ^ \"Support for SVG in favicons - Chrome Platform Status\". 19 November 2019. Retrieved 16 January 2020.\n
    24. \n
  24. ^ a b c d e f Davis, Jeff (27 December 2007). \"why doesn't the favicon for my site appear in IE7?\". jeffdav on code. Microsoft. Retrieved 11 March 2013.\n
    25. \n
  25. ^ a b c d e f Eric Lawrence (7 September 2013). \"Fun with Favicons\". Microsoft. Archived from the original on 23 May 2021. Retrieved 25 June 2022.\n
    26. \n
  26. ^ \"SVG favicon support\". Microsoft Connect. 3 May 2013. Retrieved 4 September 2014.\n
    27. \n
  27. ^ a b c d e \"Opera 7 for Windows Changelog\". Opera Software. 28 January 2003. Retrieved 28 February 2011.\n
    28. \n
  28. ^ \"What's new in Opera\". Opera Software. Retrieved 24 June 2017.\n
    29. \n
  29. ^ \"Safari Technology Preview 58, with Safari 12 Features, is Now Available\". WebKit. 6 June 2018. Retrieved 3 March 2019.\n
    30. \n
  30. ^ \"Favicons. Finally\". Iconfactory. 7 June 2018. Retrieved 3 March 2019.\n
    31. \n
  31. ^ a b c d e f g h i j k l m n o p q r s t u v w x y z aa Francis, Lewis (11 December 2007). \"Chart of modern browser support for favicon\". informationgift.com. Retrieved 23 February 2011.\n
    32. \n
  32. ^ \"Firefox deems favicons risky, banishes them from address bar\". Engadget. Retrieved 10 September 2012.\n
    33. \n
  33. ^ \"How to enable favicons in Safari so you can identify websites in tabs graphically\". iDownloadBlog. 14 June 2018. Retrieved 14 October 2020.\n
    34. \n
  34. ^ \"Opera 10.0 beta 2 for Windows changelog\". Opera Software. 16 July 2009. Retrieved 27 February 2011.\n
    35. \n
  35. ^ \"IE9 RC Minor Changes List\". Microsoft. 11 February 2011. Retrieved 16 November 2013.\n
    36. \n
  36. ^ \"Creating Pinned Tab Icons\". Apple Inc. 12 December 2016. Retrieved 9 April 2019.\n
    37. \n
  37. ^ Jonathan T. Neal (16 January 2013). \"Understand the Favicon\". Archived from the original on 23 May 2013. Retrieved 30 May 2013.\n
    38. \n
  38. ^ Mathias Bynens (14 April 2010). \"rel=\"shortcut icon\" considered harmful\". Retrieved 15 November 2011.\n
    39. \n
  39. ^ \"HTML Living Standard, Section 4.6.6.6 'Link type \"icon\"'\". WHATWG. Retrieved 17 November 2015.\n
    40. \n
  40. ^ \"iPhone Human Interface Guidelines for Web Applications: Metrics, Layout Guidelines, and Tips\". Apple Inc. Retrieved 27 May 2010.\n
    41. \n
  41. ^ a b c \"Safari Web Content Guide: Specifying a Webpage Icon for Web Clip\". Apple Inc. 15 November 2010. Retrieved 25 February 2011.\n
    42. \n
  42. ^ a b c d McLellan, Drew (17 January 2008). \"How To Set an Apple Touch Icon for Any Site\". Allinthe head.com. Retrieved 11 March 2011.\n
    43. \n
  43. ^ \"Configuring Web Applications\". developer.apple.com. Retrieved 3 July 2021.\n
    44. \n
  44. ^ a b c \"How to add a favicon to your website \u2013 The modern browser guide\". Loqbooq Blog. Archived from the original on 11 July 2021. Retrieved 3 July 2021.\n
    45. \n
  45. ^ \"Material Design\". Material Design. Retrieved 3 July 2021.\n
    46. \n
  46. ^ \"Add to Home screen - Progressive web apps (PWAs) | MDN\". developer.mozilla.org. Retrieved 3 July 2021.\n
    47. \n
  47. ^ \"Bug 111373 - don't allow animated site icons (favicons)\". bugzilla.mozilla.org. 21 November 2001.\n
    48. \n
  48. ^ \"Firefox Bug 111373 - don't allow animated site icons (mozilla.org)\". Hacker News. 7 July 2015.\n
    49. \n
  49. ^ Marlinspike, Moxie (21 February 2011). \"Defeating Ssl Using Sslstrip (Marlinspike Blackhat)\". (see description of video). SecurityTube. Archived from the original on 13 July 2011. Retrieved 9 July 2011.\n
    50. \n
  50. ^ \"Firefox version 14 features\". 18 July 2012. Retrieved 18 July 2012.\n
    51. \n
  51. ^ Linus, Robin. \"Your Social Media Fingerprint\". Retrieved 14 October 2016.\n
    52. \n
  52. ^ Goodin, Dan (19 February 2021). \"New browser-tracking hack works even when you flush caches or go incognito\". Ars Technica. Retrieved 21 February 2021.\n
    53. \n
\n

External links[edit]

\n
\n
\n
\"\"
\n
Look up favicon in Wiktionary, the free dictionary.
\n
\n
\n
\n
\"\"
\n
Wikimedia Commons has media related to Favicons.
\n
\n\n
Features · standards · protocols
Features
Web standards
Protocols
Active
Blink-based
Gecko-based
WebKit-based
Other
Discontinued
Blink-based
Gecko-based
MSHTML-based
WebKit-based
Other
", "request": "favicon.ico", "cleaned_content": "
Icon associated with a particular web site
\n

\n

\n
Wikipedia's favicon, shown in Firefox
\n

A favicon (/\u02c8f\u00e6v.\u026a\u02cck\u0252n/; short for favorite icon), also known as a shortcut icon, website icon, tab icon, URL icon, or bookmark icon, is a file containing one or more small icons[1] associated with a particular website or web page.[1][2] A web designer can create such an icon and upload it to a website (or web page) by several means, and graphical web browsers will then make use of it.[3] Browsers that provide favicon support typically display a page's favicon in the browser's address bar (sometimes in the history as well) and next to the page's name in a list of bookmarks.[3] Browsers that support a tabbed document interface typically show a page's favicon next to the page's title on the tab, and site-specific browsers use the favicon as a desktop icon.[1]\n

\n

Contents

\n\n
\n\n

History[edit]

\nIn March 1999, Microsoft released Internet Explorer 5, which supported favicons for the first time.[4] Originally, the favicon was a file called favicon.ico placed in the root directory of a website. It was used in Internet Explorer's favorites (bookmarks) and next to the URL in the address bar if the page was bookmarked.[5][6][7][4] A side effect was that the number of visitors who had bookmarked the page could be estimated by the requests of the favicon. This side effect no longer works, as all modern browsers load the favicon file to display in their web address bar, regardless of whether the site is bookmarked.[6]

\n

Standardization[edit]

\n

The favicon was standardized by the World Wide Web Consortium (W3C) in the HTML 4.01 recommendation, released in December 1999, and later in the XHTML 1.0 recommendation, released in January 2000.[8][failed verification][9][failed verification] The standard implementation uses a link element with a rel attribute in the <head> section of the document to specify the file format, file name, and location. Unlike in the prior scheme, the file can be in any Website directory and have any image file format.[10][11]\n

In 2003, the .ico format was registered by a third party with the Internet Assigned Numbers Authority (IANA) under the MIME type image/vnd.microsoft.icon.[12][13] However, when using the .ico format to display as images (e.g. not as favicon), Internet Explorer cannot display files served with this standardized MIME type.[13] A workaround for Internet Explorer is to associate .ico with the non-standard image/x-icon MIME type in Web servers.[14]\n

RFC 5988 established an IANA link relation registry,[15] and rel=\"icon\" was registered in 2010 based on the HTML5 specification. The popular <link rel=\"shortcut icon\" type=\"image/png\" href=\"image/favicon.png\"> theoretically identifies two relations, shortcut and icon, but shortcut is not registered and is redundant. In 2011 the HTML living standard[16] specified that for historical reasons shortcut is allowed immediately before icon;[17] however, shortcut does not have a meaning in this context.\n

\n

Legacy[edit]

\n

Internet Explorer 5\u201310 supports only the ICO file format. Netscape 7 and Internet Explorer versions 5 and 6 display the favicon only when the page is bookmarked, and not simply when the pages are visited as in later browsers.[4]\n

\n

Examples of favicons[edit]

\n\n

Browser implementation[edit]

\n

The following tables illustrate support of various features with major web browsers. Unless noted, the version numbers indicate the starting version number of a supported feature.\n

\n

Image file format support[edit]

\n

The following table illustrates the image file format support for the favicon.\n

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
Browser\nImage File Format\n
ICO\nPNG\nGIF\nAnimated GIFs\nJPEG\nAPNG\nSVG\n
Edge\nYes\nYes\nYes\nNo\nYes\nUn­known\nYes\n
Firefox\n1.0[18]\n1.0[18]\n1.0[18]\nYes[19]\nYes\n3.0[19]\n41.0[20]\n
Google Chrome\nYes\nYes\n4.0\nNo[21][22]\n4.0\nNo\n80[23]\n
Internet Explorer\n5.0[24]\n11.0[25]\n11.0[25]\nNo[24]\nNo[24]\nNo[24]\nNo[26]\n
Opera\n7.0[27]\n7.0[27]\n7.0[27]\n7.0[27]\n7.0[27]\n9.5\n44.0[28]\n
Safari\nYes\n4.0\n4.0\nNo\n4.0\nNo\nNon-standard (12.0)[a][29][30]\n

Additionally, such icon files can be 16\u00d716, 32\u00d732, 48\u00d748, or 64\u00d764 pixels in size, and 8-bit, 24-bit, or 32-bit in color depth.[1][3] The ICO file format article explains the details for icons with more than 256 colors on various Microsoft Windows platforms.\n

Use of favicon[edit]

\n

This table illustrates the different areas of the browser where favicons can be displayed.\n

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
Browser\nAddress bar\nAddress bar drop down list\nLinks bar\nBookmarks\nTabs\nDrag to desktop\n
Edge\nNo\nYes\nYes\nYes\nYes\nYes\n
Firefox\n1.0\u201312.0: Yes[31]
> v13: No[32]\n		Yes\nYes\nYes[31]\nYes[31]\nYes[31]\n
Google Chrome\nNo[31]\nNo\nYes[31]\nYes[31]\n1.0[31]\nNo[31]\n
Internet Explorer\n7.0[31]\nNo\n5.0[31]\n5.0[31]\n7.0[31]\n5.0[31]\n
Opera\n7.0\u201312.17: Yes
> v14: No[31]\n		No\n7.0[31]\n7.0[31]\n7.0[31]\n7.0[31]\n
Safari\nYes[31]\nYes\nNo[31]\nYes[31]\n1.0\u20138.0: Yes
9.0\u201311.0: No
> 12.0: Optional[33]\n		No[31]\n
\n
\n

Opera Software added the ability to change the favicon in the Speed Dial in Opera 10.[34]\n

\n

How to use[edit]

\n

This table illustrates the different ways the favicon can be recognized by the web browser. The standard implementation uses a link element with a rel attribute in the <head> section of the document to specify the file's format, name and location.\n

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
\nEdge\nFirefox\nGoogle Chrome\nInternet Explorer\nOpera\nSafari\n
<link rel="shortcut icon"\n href="https://example.com/myicon.ico">\n
\n		Yes[4]\nYes[4]\nYes[4]\nYes[4][24]\nYes[4]\nYes\n
<link rel="icon"\n type="image/vnd.microsoft.icon"\n href="https://example.com/image.ico">\n
\n		Yes\nYes\nYes\nYes (from IE 9)[25]\nYes\nYes\n
<link rel="icon" type="image/x-icon"\n href="https://example.com/image.ico">\n
\n		Yes[4]\nYes[4]\nYes[4]\nYes (from IE 9)[35]\nYes[4]\nYes\n
<link rel="icon"\n href="https://example.com/image.ico">\n
\n		Yes\nYes\nYes\nYes (from IE 11)[25]\nYes\nYes\n
<link rel="icon" type="image/gif"\n href="https://example.com/image.gif">\n
\n		Yes\nYes\nYes\nYes (from IE 11)[25]\nYes\nYes\n
<link rel="icon" type="image/png"\n href="https://example.com/image.png">\n
\n		Yes\nYes\nYes\nYes (from IE 11)[25]\nYes\nYes\n
<link rel="icon" type="image/svg+xml"\n href="https://example.com/image.svg">\n
\n		Yes\nYes\nYes\nYes\nYes\nNo\n
<link rel="mask-icon"\n href="https://example.com/image.svg" color="red">\n
\n		No\nNo\nNo\nNo\nNo\nYes[36]\n
favicon.ico located in the website's root\nYes[citation needed]\nOptional[b]\nYes\nYes\nOptional[c]\nYes\n
precedence: prefer root or (X)HTML linked version\nlinked[31]\nlinked[31]\nlinked[31]\nlinked[31]\n?\n?\n
\n
\n
    \n
  1. ^ Safari, since version 12.0, supports single-color SVG favicons in some cases in a non-standard mask-icon format.\n
    2. \n
  2. ^ Firefox only accepts favicon.ico in the website's root without a <link> tag if the setting browser.chrome.site_icons is set to true in about:config. The default value is true. If set to false, these favicons are ignored.\n
    3. \n
  3. ^ Opera loads /favicon.ico only if Multimedia/Always load favicon option in opera:config is set to 1. See Opera Support page for more details.\n
    4. \n
\n

If links for both PNG and ICO favicons are present, PNG-favicon-compatible browsers select which format and size to use as follows. Firefox and Safari will use the favicon that comes last. Chrome for Mac will use whichever favicon is ICO formatted, otherwise the 32\u00d732 favicon. Chrome for Windows will use the favicon that comes first if it is 16\u00d716, otherwise the ICO. If none of the aforementioned options are available, Chrome will use whichever favicon comes first, exactly the opposite of Firefox and Safari. Indeed, Chrome for Mac will ignore the 16\u00d716 favicon and use the 32\u00d732 version, only to scale it back down to 16\u00d716 on non-retina devices. Opera will choose from any of the available icons at random.[37]\n

Only SeaMonkey does not fetch favicon.ico files in the website's root by default.[38]\n

\n

HTML5 recommendation for icons in multiple sizes[edit]

\n

The current HTML5 specification recommends specifying multiple sizes for the icons, using the attributes rel=\"icon\" sizes=\"space-separated list of icon dimensions\" within a <link> tag.[39] Multiple icon formats, including container formats such as Microsoft .ico and Macintosh .icns files, as well as Scalable Vector Graphics may be provided by including the icon's content type in the format type=\"file content-type\" within the <link> tag.\n

As of iOS 5, Apple mobile devices ignore the HTML5 recommendation and instead use the proprietary apple-touch-icon method detailed below. The Google Chrome web browser however, will select the closest matching size from those provided in the HTML headers to create 128\u00d7128 pixel application icons, when the user chooses the Create application shortcuts... from the \"Tools\" menu.\n

\n

Home screen icons on mobile devices[edit]

\n

On Apple iPhones and iPads, as well as Android mobile devices, users can pin web pages as shortcuts icons to their home screen. These shortcut icons look similar to regular apps and web developers can provide dedicated icons for them.\n

\n

Apple devices[edit]

\n

For Apple devices with the iOS operating system version 1.1.3 or later, users can pin a website to the home screen using the Add to Home Screen button within the share sheet in Safari.[40][41]\n

This works for any website. But for iOS to display the shortcut with an icon, the a website needs to supplying a <link rel=\"apple-touch-icon\" ...> in the <head> section of documents served by the website. If the custom icon is not provided, a thumbnail of the web page will be put on the home screen instead.[42]\n

The app icon sizes on the different device classes differ. The recommended sizes for the icons are 152x152 for iPads (until iPad 2, released in 2011), 167x167 for iPads with Retina screens (iPad 3 and later) and 180x180 for iPhones. If no icon in the matching size is provided, iOS will pick the largest icon with rel=\"apple-touch-icon\" and scale it automatically.[43]\n

\n
Example code[44]
\n
<!-- For iPad -->\n <link rel="apple-touch-icon" type="image/png" sizes="167x167" href="favicon-167x167.png">\n
\n
<!-- For iPhone -->\n <link rel="apple-touch-icon" type="image/png" sizes="180x180" href="favicon-180x180.png">\n
\n

The icon file referenced by apple-touch-icon is modified to add rounded corners. On the iOS versions prior to iOS 7, a drop shadow, and reflective shine would be added, and apple-touch-icon-precomposed icon may be provided to instruct devices not to apply reflective shine on the image.[41][42]\n

No HTML is required by browsers or mobile devices to retrieve these icons.[42] The website's root is the default location for the file apple-touch-icon.png (in order of priority).[41][42]\n

\n

Android devices[edit]

\n

On Android devices, users can use the Add to home screen function in Chrome's tools menu to pin a web page to their home screen.\n

This also works for any website, but if no favicon is provided, a generic icon is used. As Android app icons are sized in 48x48 points, website should provide favicons sized in multiples of 48x48 pixels. For modern high resolution devices, Google recommends providing icons in 192x192 pixels.[45]\n

\n
Example code[44]
\n
<!-- For Android -->\n <link rel="icon" type="image/png" sizes="48x48" href="favicon-48x48.png">\n <link rel="icon" type="image/png" sizes="192x192" href="favicon-192x192.png">\n
\n

Android also supports Web Manifest files, which makes it possible to integrate web sites deeper within the system. A Web Manifest is a JSON file, that specifies meta data for a progressive web app. It allows the developer to not only provide the icons but also a short name for display on the home screen as well as theme colors.[46] However, providing a web manifest file is not necessary for the Add to home screen feature to work.[44]\n

\n

Animated favicons[edit]

\n

Various browsers such as Firefox and Opera support animation of favicons. A bug report has been open for Firefox since 2001 requesting a way to disable this feature.[47][48]\n

\n

Limitations and criticism[edit]

\n

Due to the need to always check for it in a fixed location, the favicon can lead to artificially slow page-load time and unnecessary 404 entries in the server log if it is nonexistent.[6]\n

The W3C did not standardize the rel-attribute, so there are other keywords such as shortcut icon that are also accepted by the user agent.[11][24]\n

Favicons are often manipulated as part of phishing or eavesdropping attacks against HTTPS web pages. Many web browsers display favicons near areas of the web browser's UI, such as the address bar, that are used to convey whether the connection to a website is using a secure protocol like TLS. By changing the favicon to a familiar padlock image an attacker can attempt to trick the user into thinking they are securely connected to the proper website. Automated man-in-the-middle attack tools such as sslstrip utilize this trick.[49] In order to eliminate this, some web browsers, such as Firefox or Google Chrome, display the favicon within the tab whilst displaying the security status of the protocol used to access the website beside the URL.[50]\n

Since favicons are usually located at the root of the site directory on the server, they can be employed with some reliability to disclose whether a web client is logged into a given service. This works by making use of the redirect-after-login feature of many websites, by querying for the favicon in a redirect-after-login URL and testing the server response to discern whether the user is given the requested resource (which means they are logged in), or instead redirected to the login page (which means that they are not logged into the service).[51]\n

In 2021, a method for browser tracking using favicons was demonstrated by researchers at the University of Illinois.[52]\n

\n

References[edit]

\n
\n
    \n
  1. ^ a b c d Lane, Dave (9 August 2008). \"Creating a Multi-Resolution Favicon Including Transparency with the GIMP\". Egressive.com. Archived from the original on 25 December 2010. Retrieved 25 February 2011.\n
    2. \n
  2. ^ \"What's With Google's New Mini Icon?\". BBC. 20 January 2009. Retrieved 25 February 2011. That 16x16 pixel square is the size of the favicon in question, if not the scope.\n
    3. \n
  3. ^ a b c Apple, Jennifer. \"Favicon \u2014 How To Create A Favicon.ico\". Photoshopsupport.com. Retrieved 25 February 2011.\n
    4. \n
  4. ^ a b c d e f g h i j k l \"How to Add a Shortcut Icon to a Web Page\". Microsoft Developer Network. Microsoft. Archived from the original on 5 January 2018. Retrieved 15 March 2010.\n
    5. \n
  5. ^ McGrew, Darin (26 April 2007). \"Web Authoring FAQ \u2013 8.11. How can I have a custom icon when people bookmark my site?\". htmlhelp.com. Retrieved 23 February 2011.\n
    6. \n
  6. ^ a b c Heng, Christopher (7 September 2008). \"What is Favicon.ico? Personalise Your Site's Bookmarks\". thesitewizard.com. Retrieved 23 February 2011.\n
    7. \n
  7. ^ \"Creating favicons with Adobe Photoshop and GoLive\". Adobe GoLive. Archived from the original on 7 December 2003. Retrieved 25 February 2011.{{cite web}}: CS1 maint: unfit URL (link)\n
    8. \n
  8. ^ \"HTML 4.01 Specification\". World Wide Web Consortium. 24 December 1999. Retrieved 14 March 2011.\n
    9. \n
  9. ^ \"XHTML\u2122 1.0: The Extensible HyperText Markup Language\". World Wide Web Consortium. 26 January 2000. Retrieved 14 March 2011.\n
    10. \n
  10. ^ Dubost, Karl (October 2005). \"Web site meta data profile: favicon, ...\" World Wide Web Consortium. Retrieved 23 February 2011.\n
    11. \n
  11. ^ a b Dubost, Karl (24 October 2005). \"How to Add a Favicon to your Site\". World Wide Web Consortium. Retrieved 25 February 2011.\n
    12. \n
  12. ^ Butcher, Simon (3 September 2003). \"Published specification\". Internet Assigned Numbers Authority. Retrieved 25 February 2011.\n
    13. \n
  13. ^ a b \"IE9 RC Minor Changes List\". IEInternals. Retrieved 7 April 2016.\n
    14. \n
  14. ^ Irish, Paul (15 December 2010). \"commit 37b5fec090d00f38de64 to paulirish's html5-boilerplate\". GitHub. Retrieved 25 February 2011.\n
    15. \n
  15. ^ \"Link Relations\". IANA.\n
    16. \n
  16. ^ Ian Hickson (19 January 2011). \"HTML is the new HTML5\". The WHATWG Blog. WHATWG.\n
    17. \n
  17. ^ \"HTML5 revision r6404\". HTML5 Tracker.\n
    18. \n
  18. ^ a b c David (19 July 2003). \"Mozilla 0.9.6 Release Notes\". Mozilla. Retrieved 23 February 2011.\n
    19. \n
  19. ^ a b \"Bug 111373: don't allow animated site icons (favicons)\". Retrieved 1 June 2014.\n
    20. \n
  20. ^ Daniel Holbert (12 June 2015). \"Bug 366324 \u2013 SVG site icons (favicons, shortcut icons) support \u2013 comment 55\". Bugzilla@Mozilla. Mozilla. Retrieved 12 June 2015.\n
    21. \n
  21. ^ tracker, chromium. \"no movement in favicon\". chromium.org. Retrieved 11 April 2016.\n
    22. \n
  22. ^ tracker, chromium. \"Animated Favicons not supported\". chromium.org. Retrieved 8 November 2018.\n
    23. \n
  23. ^ \"Support for SVG in favicons - Chrome Platform Status\". 19 November 2019. Retrieved 16 January 2020.\n
    24. \n
  24. ^ a b c d e f Davis, Jeff (27 December 2007). \"why doesn't the favicon for my site appear in IE7?\". jeffdav on code. Microsoft. Retrieved 11 March 2013.\n
    25. \n
  25. ^ a b c d e f Eric Lawrence (7 September 2013). \"Fun with Favicons\". Microsoft. Archived from the original on 23 May 2021. Retrieved 25 June 2022.\n
    26. \n
  26. ^ \"SVG favicon support\". Microsoft Connect. 3 May 2013. Retrieved 4 September 2014.\n
    27. \n
  27. ^ a b c d e \"Opera 7 for Windows Changelog\". Opera Software. 28 January 2003. Retrieved 28 February 2011.\n
    28. \n
  28. ^ \"What's new in Opera\". Opera Software. Retrieved 24 June 2017.\n
    29. \n
  29. ^ \"Safari Technology Preview 58, with Safari 12 Features, is Now Available\". WebKit. 6 June 2018. Retrieved 3 March 2019.\n
    30. \n
  30. ^ \"Favicons. Finally\". Iconfactory. 7 June 2018. Retrieved 3 March 2019.\n
    31. \n
  31. ^ a b c d e f g h i j k l m n o p q r s t u v w x y z aa Francis, Lewis (11 December 2007). \"Chart of modern browser support for favicon\". informationgift.com. Retrieved 23 February 2011.\n
    32. \n
  32. ^ \"Firefox deems favicons risky, banishes them from address bar\". Engadget. Retrieved 10 September 2012.\n
    33. \n
  33. ^ \"How to enable favicons in Safari so you can identify websites in tabs graphically\". iDownloadBlog. 14 June 2018. Retrieved 14 October 2020.\n
    34. \n
  34. ^ \"Opera 10.0 beta 2 for Windows changelog\". Opera Software. 16 July 2009. Retrieved 27 February 2011.\n
    35. \n
  35. ^ \"IE9 RC Minor Changes List\". Microsoft. 11 February 2011. Retrieved 16 November 2013.\n
    36. \n
  36. ^ \"Creating Pinned Tab Icons\". Apple Inc. 12 December 2016. Retrieved 9 April 2019.\n
    37. \n
  37. ^ Jonathan T. Neal (16 January 2013). \"Understand the Favicon\". Archived from the original on 23 May 2013. Retrieved 30 May 2013.\n
    38. \n
  38. ^ Mathias Bynens (14 April 2010). \"rel=\"shortcut icon\" considered harmful\". Retrieved 15 November 2011.\n
    39. \n
  39. ^ \"HTML Living Standard, Section 4.6.6.6 'Link type \"icon\"'\". WHATWG. Retrieved 17 November 2015.\n
    40. \n
  40. ^ \"iPhone Human Interface Guidelines for Web Applications: Metrics, Layout Guidelines, and Tips\". Apple Inc. Retrieved 27 May 2010.\n
    41. \n
  41. ^ a b c \"Safari Web Content Guide: Specifying a Webpage Icon for Web Clip\". Apple Inc. 15 November 2010. Retrieved 25 February 2011.\n
    42. \n
  42. ^ a b c d McLellan, Drew (17 January 2008). \"How To Set an Apple Touch Icon for Any Site\". Allinthe head.com. Retrieved 11 March 2011.\n
    43. \n
  43. ^ \"Configuring Web Applications\". developer.apple.com. Retrieved 3 July 2021.\n
    44. \n
  44. ^ a b c \"How to add a favicon to your website \u2013 The modern browser guide\". Loqbooq Blog. Archived from the original on 11 July 2021. Retrieved 3 July 2021.\n
    45. \n
  45. ^ \"Material Design\". Material Design. Retrieved 3 July 2021.\n
    46. \n
  46. ^ \"Add to Home screen - Progressive web apps (PWAs) | MDN\". developer.mozilla.org. Retrieved 3 July 2021.\n
    47. \n
  47. ^ \"Bug 111373 - don't allow animated site icons (favicons)\". bugzilla.mozilla.org. 21 November 2001.\n
    48. \n
  48. ^ \"Firefox Bug 111373 - don't allow animated site icons (mozilla.org)\". Hacker News. 7 July 2015.\n
    49. \n
  49. ^ Marlinspike, Moxie (21 February 2011). \"Defeating Ssl Using Sslstrip (Marlinspike Blackhat)\". (see description of video). SecurityTube. Archived from the original on 13 July 2011. Retrieved 9 July 2011.\n
    50. \n
  50. ^ \"Firefox version 14 features\". 18 July 2012. Retrieved 18 July 2012.\n
    51. \n
  51. ^ Linus, Robin. \"Your Social Media Fingerprint\". Retrieved 14 October 2016.\n
    52. \n
  52. ^ Goodin, Dan (19 February 2021). \"New browser-tracking hack works even when you flush caches or go incognito\". Ars Technica. Retrieved 21 February 2021.\n
    53. \n
\n

External links[edit]

\n
\n
\n
\"\"
\n
Look up favicon in Wiktionary, the free dictionary.
\n
\n
\n
\"\"
\n
Wikimedia Commons has media related to Favicons.
\n
\n\n
Features · standards · protocols
Features
Web standards
Protocols
Active
Blink-based
Gecko-based
WebKit-based
Other
Discontinued
Blink-based
Gecko-based
MSHTML-based
WebKit-based
Other
" }